<template>
    <div class="invitation-code-page">
      <div>
           <el-form>
                <el-form-item label="商户号：">
                    <el-input placeholder="请输入商户号" v-model="searchForm.usedPhone" size="small" clearable></el-input>
               </el-form-item>
               <el-form-item label="邀请码：">
                    <el-input placeholder="请输入邀请码" v-model="searchForm.inviteCode" size="small" clearable></el-input>
               </el-form-item>
               <el-form-item label="状态：">
                   <el-select v-model="searchForm.status" placeholder="请选择状态" size="small">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>

           </el-form>
       </div>

      <div>
        <el-form>
          <el-form-item label="永久邀请码：">
            <el-input placeholder="请输入邀请码" disabled v-model="code" size="small" clearable v-if="code" style="width: 100px"></el-input>
            <el-button class="search-btn" @click="copyCode(code)">复制</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" style="margin-left:20px;background: red;" @click="submitCreate">商家邀请码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--<div>
            <el-form>
                    <el-form-item>
                    <span>永久邀请码：</span>
                    &lt;!&ndash; <el-button class="search-btn" @click="copyCode(code)">复制</el-button> &ndash;&gt;
                    <el-button class="search-btn" @click="onGenerate">生成永久邀请码</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button class="search-btn" style="margin-left:20px;background: red;" @click="submitCreate">商家邀请码</el-button>
                </el-form-item>
                <div class="container_p">
                    <p v-for="(item,index) in code" :key="index">
                        {{item}}
                        <span @click="copyCode(item)">复制</span>
                    </p>
                </div>
            </el-form>
        </div>-->

       <div>
           <el-table :data="tableData" border @cell-click="cellClick" class="tableDiv">
               <el-table-column prop="merchant_code" label="邀请码"></el-table-column>
               <el-table-column prop="merchant_name" label="使用商户"></el-table-column>
               <el-table-column prop="type" label="类型" :formatter="getTypeName"></el-table-column>
               <el-table-column prop="status" label="状态"></el-table-column>
               <el-table-column prop="remark" label="备注">
                 <template slot-scope="scope">
                   <el-input size="small" v-model="scope.row.remark" @blur="removeClass" @change="handleEdit(scope.row.remark, scope.$index, scope.row)"></el-input>
                   <span>{{ scope.row.remark }}</span>
                 </template>
               </el-table-column>
               <el-table-column prop="use_time" label="使用时间"></el-table-column>
               <el-table-column prop="create_time" label="创建时间"></el-table-column>
               <el-table-column label="操作">
                   <div slot-scope="scope">
                       <div class="copy-btn" @click="copyCode(scope.row.merchant_code)">复制</div>
                   </div>
               </el-table-column>
           </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div>
       </div>

    </div>

</template>
<script>
import {
  apiPromoterCodeList,
  apiPromoterCreateCode,
  apiSetSaleMan,
  apiGenerateCode,
  apiMerchantEditRemark, apiInvitationCodeRemark
} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    usedPhone: '',
                    inviteCode: '',
                    limit: 10,
                    page: 1,
                    status: '',
                    token: window.sessionStorage.getItem("token")
                },
                statusData: [{
                    id: 1,
                    name: '使用'
                },{
                    id: 2,
                    name: '未使用'
                },{
                    id: 3,
                    name: '永久邀请码'
                }],
                code: null,
                pageTotal: 0,
                mainUrl: '',
                codeDialog: false,
                submitOptLoading: false,
                curDialogType: '',
                dialogTitle: '',
                saleManId: '',
                salemanList: []
            }
        },
        created () {
            this.getTableData()
        },
        methods:{
          handleEdit(remark,index,row) {
            apiInvitationCodeRemark({
              token: window.sessionStorage.getItem("token"),
              'remark': remark,
              'id': row.id
            }).then(res =>{
              this.$message({
                message: '备注成功',
                type: 'success'
              });
            })
          },
          cellClick(row, column, cell, event){
            for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
              document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
            }
            cell.classList.add("current-cell");
          },
          removeClass(){
            document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
          },
          getTypeName(row){
            return row.type === 1 ? '一次性' : '永久';
          },
          getTableData (){
              apiPromoterCodeList(this.searchForm).then(res =>{
                  this.tableData = res.data
                  this.code = res.promoterInfo.code
                  this.pageTotal = res.count
              }).catch(res => {

              })
          },
          searchData(){
              this.getTableData()
          },
          copyCode(code){
              if(code){
                  let oInput = document.createElement('input');
                  oInput.value = this.BASE_MAIN_URL + code;
                  document.body.appendChild(oInput);
                  oInput.select(); // 选择对象;
                  console.log(oInput.value)
                  document.execCommand("Copy"); // 执行浏览器复制命令
                  this.$message({
                  message: '复制成功',
                  type: 'success'
                  });
                  oInput.remove()
              } else {
                  this.$message.error('请联系客服')
              }
          },
          /*copyCode(code){
              if(code){
                  let oInput = document.createElement('input');
                  oInput.value = this.BASE_MAIN_URL + code;
                  document.body.appendChild(oInput);
                  oInput.select(); // 选择对象;
                  console.log(oInput.value)
                  document.execCommand("Copy"); // 执行浏览器复制命令
                  this.$message({
                  message: '复制成功',
                  type: 'success'
                  });
                  oInput.remove()
              } else {
                  this.$message.error('请联系客服')
              }
          },*/
          handleSizeChange(val){
              this.searchForm.limit = val;
              this.getTableData()
          },
          handleCurrentChange(val){
              this.searchForm.page = val;
              this.getTableData()
          },
          submitCreate(){
            this.submitOptLoading = true
            apiPromoterCreateCode({
                token: window.sessionStorage.getItem("token")
            }).then(res =>{
              this.submitOptLoading = false
               if(res.code == 1){
                   this.getTableData()
                   this.$message.success('生成成功')
                   this.codeDialog = false
               } else {
                   this.$message.error(res.msg)
               }
            }).catch(res => {
               this.submitOptLoading = false
               this.$message.error(res.msg)
            })

          },

          // 生成永久邀请码
          onGenerate:function(){
              apiGenerateCode({token: window.sessionStorage.getItem("token")}).then(res=>{
                  if(res.code == -1 ){
                      this.$message.error(res.msg)
                  }
                  this.code.push(res.data.merchant_code)
              })
          },
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.copy-btn {
    background: #4b95ff;
    padding: 2px 5px;
    width: 60px;
    margin: 0 auto;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}
.set-btn {
  background: red;
  padding: 2px 5px;
  width: 100px;
  margin: 0 auto;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin-top: 5px;
}
.confirm-btn {
    background: #4b95ff;
    color: #ffffff;
}

.container_p{
    width: 95%;
    margin: 20px 0;
    padding: 20px 0;
    box-shadow: 0px 0px 5px rgba(199, 197, 197, 0.692);
    p{
        display: inline-block;
        width: 45%;
        margin: 10px 2%;
        font-size: 14px;
        // background-color: pink;
        position: relative;
        border-bottom: 1px solid rgba(199, 197, 197, 0.692);
        padding-bottom: 5px;
        span{
            position: absolute;
            right: 0px;
            top: 0;
            font-size: 14px;
            cursor: pointer;
            color: red;
        }
    }
}

.tableDiv .el-input {
  display: none;
}

.current-cell .el-input {
  display: block;
}
.current-cell .el-input + span {
  display: none;
}
</style>
